<script setup lang="ts">
import { onMounted, defineProps, ref } from "@vue/runtime-core";
const props = defineProps({
  text: {
    type: String,
    default: 'button'
  },
  fontSize: {
    type: String,
    default: '16px'
  },
  round: Boolean,
  throttle: Boolean,
  radiusSize: {
    type: String,
    default: '15px'
  },
  disable: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  }
})
</script>
  <!-- todo -->
<template>
  <div class="base" :class="{ 'border-radius': props.round, 'throttle': props.throttle && !props.disable , 'disable': props.disable || props.loading}">
    <slot name="left" class="left"></slot> {{ props.text }} <slot name="right"></slot>
  </div>
</template>

<style scoped lang="less">
.disable {
  cursor: not-allowed !important;
  background-color: #ecf5ff;
}
.base {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  font-size: v-bind('props.fontSize');
  padding: 10px 15px;
  background: var(--button-red);
}

.throttle {
  animation: throttle 2s step-end forwards;
}

.throttle:active {
  animation: none;
  color: var(--button-red-hover)
}

@keyframes throttle {
  from {
    pointer-events: none;
    opacity: 0.5;
  }

  to {
    pointer-events: all;
    opacity: 1;
  }
}

.border-radius {
  border: 1px;
  border-radius: v-bind('props.radiusSize');
}
</style>